
<template>
	<view >
		<view  v-if="show" :z-index="zIndex - 1" class="maskbg"></view>
		<view v-if="show" class="container-show" :style=" 'z-index:' + zIndex ">
			<view class="mask">
				<view>
					<view class="A-title">{{ title }}</view>
					<view class="A-content">
						<text class="ml-60">感谢您使用本小程序，在使用前您应当阅读井同意</text>
						<text class="text-color-primary" @click="openPrivacy">{{privacyContractName}}</text>
						当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
					</view>
					<view class="A-btn">
						<button class="leftBtn" id="agree-btn" type="primary" @click="cancelClick">取消</button>


						<button class="rightBtn" id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"
							@agreeprivacyauthorization="sureClick">
							同意并继续
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		name: 'privacy',

		props: {
			// show: {
			// 	type: Boolean,
			// 	default: false,
			// },
			zIndex: {
				type: Number,
				default: 99999,
			},
			title: {
				type: String,
				default: '用户隐私保护提示',
			}
		},

		data() {
			return {
				show:false,
				privacyContractName:""
			};
		},
		mounted() {
			wx.getPrivacySetting({
				success: res => {
					console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (!res.needAuthorization) {
						// 需要弹出隐私协议
						// this.$emit('update:show', true);
						this.show=true
						this.privacyContractName = res.privacyContractName
					} else {
						// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口

					}
				},
				fail: (error) => {
					console.log(error)
				}
			})

		},
		onLoad() {

		},
		methods: {
			closePopup() {
				// this.$emit('update:show', false);
				this.show=false
			},
			cancelClick() {
				this.closePopup();
				this.$emit('cancel');
			},
			sureClick() {
				this.closePopup();
				this.$emit('agree');
			},
			openPrivacy() {
				wx.openPrivacyContract({
					success: (e) => {}, // 打开成功
					fail: (error) => {
						this.$utils.showToast(error)
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 0;
		min-height: 200rpx;
		transition: all 0s linear;
		border-radius: 25rpx;
		overflow: hidden;
	}
	.maskbg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		
	}
	.mask {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 25rpx;
	}

	.container-show {
		width: 80%;
		left: 10%;
		top: 0;
		bottom: 0;
		margin-top: -80rpx;
		// background-color: #fff;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.A-title {
		min-width: 540rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
		margin-top: 40rpx;
		color: #272848;
		font-size: 38rpx;
		font-weight: 600 !important;
	}

	.A-content {
		margin-left: 30rpx;
		margin-right: 30rpx;
		line-height: 50rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		color: 272848;
		font-size: 16px;
	}

	.line {
		background-color: #e3e5eb;
		width: 600rpx;
		height: 2rpx;
		margin-top: 34rpx;
	}

	.A-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 600rpx;
		height: 96rpx;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
	}

	.leftBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40%;
		height: 100%;
		color: #44b674;
		font-size: 34rpx;
		background-color: #f5f6f9;
		margin-left: 40rpx;
	}

	.rightBtn {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background-color: #44b674;
		margin-right: 40rpx;
	}

	.onlyRightBtn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
	}

	.middleLine {
		width: 2rpx;
		height: 46rpx;
		background-color: #e3e5eb;
	}
</style>
